<template>
  <div class="mt-detailinput">
    <div
      :style="finalLabelStyle"
      class="mt-detailinput--label">
      {{ label }}<span v-show="showColon && label">:&#8194;</span>
    </div>
    <el-tooltip
      v-if="showTooltips && textOverflow"
      class="item"
      effect="dark"
      placement="top">
      <div slot="content">
        <slot></slot>
      </div>
      <div
        :style="finalInputStyle"
        :class="{ 'omit': showOmit }"
        class="mt-detailinput--detail">
        <slot></slot>
      </div>
    </el-tooltip>
    <div
      v-else
      :id="randomId"
      :style="finalInputStyle"
      :class="{ 'omit': showOmit }"
      class="mt-detailinput--detail">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MtDetailinput",

  props: {
    label: {
      type: String,
      default: ""
    },
    labelStyle: {
      type: Object,
      default: function () {
        return {};
      }
    },
    inputStyle: {
      type: Object,
      default: function () {
        return {};
      }
    },
    /* 是否显示label后的冒号 */
    showColon: { type: Boolean, default: true },
    /* 是否过长显示..., 一般多用于纯文字 */
    showOmit: { type: Boolean, default: true },
    /* 是否过长显示tooltips */
    showTooltips: { type: Boolean, default: true },
    // 高度是否默认
    isHeightNone: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      randomId: this._.uniqueId("mt-detailinput_"),
      textOverflow: false
    };
  },

  computed: {
    finalLabelStyle () {
      return {
        "fontSize": this.labelStyle.fontSize || "14px",
        "color": this.labelStyle.color || "rgba(25, 28, 34, 0.6)",
        "height": this.labelStyle.height || this.isHeightNone? "" : "30px",
        "line-height": this.labelStyle.lineHeight || "30px"
      };
    },
    finalInputStyle () {
      return {
        "fontSize": this.inputStyle.fontSize || "14px",
        "color": this.inputStyle.color || "rgba(25, 28, 34, 0.8)",
        "height": this.inputStyle.height || this.isHeightNone? "" : "30px",
        "line-height": this.inputStyle.lineHeight || "30px"
      };
    }
  },

  created () {},

  mounted () {
    setTimeout(() => {
      const dom = document.getElementById(this.randomId);
      if (dom && (dom.clientWidth < dom.scrollWidth)) this.textOverflow = true;
    }, 1000);
  },

  methods: {
  }
};
</script>

<style lang="scss" scoped>
.mt-detailinput {
    display: flex;
    &--label {
        flex-shrink: 0;
    }
    .omit {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
</style>
